import { ReactNode, useMemo } from 'react'
import _ from 'lodash'
import Icon, { BellOutlined } from '@ant-design/icons'

import { Texty } from '@/components/Texty'
import TrackManageIcon from '@/assets/icons/trackManage.svg?react'
import TrackOrderIcon from '@/assets/icons/trackOrder.svg?react'

export interface IMenu<TLabelType extends string | ReactNode = string> {
  label: TLabelType
  /**
   * 1. 可折叠项用 $ 前缀，值随意，唯一即可
   * 2. 可导航项用 / 前缀，值为完整 pathname + search + hash
   */
  key: string
  auth?: [string, ...string[]]
  /**
   * 配置动态 pathname，用于菜单自动选中
   */
  pathPattern?: string
  icon?: ReactNode
  /**
   * 只能出现在第一层
   */
  children?: IMenu<TLabelType>[]
}

export const useMenus = (
  collapsed: boolean,
): {
  menus: IMenu[]
  items: Omit<IMenu<ReactNode>, 'auth' | 'pathPattern'>[]
} => {
  const menus = useMemo(() => {
    let result: IMenu[] = []
    if ($APP === 'OMS') {
      result = [
        {
          label: '运单跟进',
          key: '$trackOrder',
          auth: ['1'],
          icon: <Icon component={TrackOrderIcon} />,
          children: [
            {
              key: '/biz/trackOrder/list',
              pathPattern: '/biz/trackOrder/list/*', // 有详情页
              label: '运单列表',
            },
          ],
        },
        {
          label: '追踪管理',
          key: '$trackManage',
          auth: ['1'],
          icon: <Icon component={TrackManageIcon} />,
          children: [
            {
              key: '/biz/trackManage/list',
              pathPattern: '/biz/trackManage/list/*', // 有详情页
              label: '追踪列表',
            },
            {
              key: '/biz/trackManage/eventList',
              pathPattern: '/biz/trackManage/eventList',
              label: '轨迹列表',
            },
            {
              key: '/biz/trackManage/eventTemplate',
              pathPattern: '/biz/trackManage/eventTemplate',
              label: '轨迹模板',
            },
          ],
        },
      ]
    } else {
      result = [
        {
          label: '运单跟进',
          key: '$trackOrder',
          auth: ['1'],
          icon: <Icon component={TrackOrderIcon} />,
          children: [
            {
              key: '/biz/trackOrder/list',
              pathPattern: '/biz/trackOrder/list/*', // 有详情页
              label: '运单列表',
            },
            {
              key: '/biz/trackOrder/origRoute',
              label: '原始路由列表',
            },
            {
              key: '/biz/trackOrder/tplRoute',
              pathPattern: '/biz/trackOrder/tplRoute/*', // 有详情页
              label: '路由模板列表',
            },
          ],
        },
        {
          label: '追踪管理',
          key: '$trackManage',
          auth: ['1'],
          icon: <Icon component={TrackManageIcon} />,
          children: [
            {
              key: '/biz/trackManage/list',
              pathPattern: '/biz/trackManage/list/*', // 有详情页
              label: '追踪列表',
            },
            {
              key: '/biz/trackManage/eventList',
              pathPattern: '/biz/trackManage/eventList',
              label: '轨迹列表',
            },
            {
              key: '/biz/trackManage/eventTemplate',
              pathPattern: '/biz/trackManage/eventTemplate',
              label: '轨迹模板',
            },
          ],
        },
        {
          label: '消息通知管理',
          key: '$msgManage',
          auth: ['1'],
          icon: <BellOutlined />,
          children: [
            {
              key: '/biz/msgManage/list',
              pathPattern: '/biz/msgManage/list/*', // 有详情页
              label: '消息',
            },
          ],
        },
      ]
    }
    return result
      .filter(({ auth }) => (auth ? auth.some(code => code === '1') : true)) // 第一层过滤
      .map(({ ...menu }) => {
        if (menu.children) {
          menu.children = menu.children.filter(
            ({ auth }) => (auth ? auth.some(code => code === '1') : true), // 第二层过滤
          )
          menu.children = menu.children.map(({ ...item }) => {
            delete item.children // 删除第三层
            return item
          })
        }
        return menu
      })
  }, [])

  const items = useMemo<Omit<IMenu<ReactNode>, 'auth' | 'pathPattern'>[]>(() => {
    const addTexty = (item: IMenu<ReactNode>): IMenu<ReactNode> => {
      if (collapsed) return item
      return {
        ...item,
        label: (
          <Texty usageTooltipComponent placement="right" mouseEnterDelay={0.5} mouseLeaveDelay={0} hideOnScroll={false}>
            {item.label}
          </Texty>
        ),
      }
    }
    return menus.map(menu => {
      const item: IMenu<ReactNode> = { ...menu }
      const omitKeys = ['auth', 'pathPattern'] as const
      if (item.children) {
        item.children = item.children.map(d => addTexty(_.omit(d, omitKeys)))
      }
      return addTexty(_.omit(item, omitKeys))
    })
  }, [collapsed, menus])

  return { menus, items }
}
